<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">点击</button>
		<p>abc</p>
		<div class="inner">

		</div>
		<div class="create">

		</div>
		<script type="text/javascript">
			//三种创建元素方式区别
			//1.document.write()创建元素
			//该方式是直接将内容写入到页面的内容流中,但是文档流执行完毕,则它会导致页面全部重绘
			// 测试1	
			// document.write("<div>123</div>")

			// 测试2
			// var btn = document.querySelector("button")
			// btn.onclick = function() {
			// 	document.write("<div>123</div>")
			// }
			// 测试3
			// window.onload=function(){
			// 	document.write("<div>123</div>")
			// }

			//2.innerHTML创建元素
			var inner = document.querySelector(".inner");

			// for (var i = 0; i < 100; i++) {
			// 	inner.innerHTML += "<a href='#'>百度</a>";
			// }
			
			var arr=[];
			for (var i = 0; i < 100; i++) {
				arr.push("<a href='#'>百度</a>");
			}
			inner.innerHTML=arr.join('');

			//3.document.createElement()创建元素
			var create = document.querySelector(".create");
			for (var i = 0; i < 100; i++) {
				var a = document.createElement("a");
				create.appendChild(a);
			}
		</script>
	</body>
</html>
